<template>
	<view class="open-box">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="开具发票" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="open-box1">
			<view class="top-tip display-flex">
				<image :src=" '/images/notice_g.png' | formatImgUrl"></image>
				<text>请您核实发票信息，确保信息填写正确，以免影响发票的后续使用。</text>
			</view>

			<view class="box1-item display-flex just-between">
				<view class="box1-left display-flex">
					<view class="tit">
						抬头类型
					</view>
					<text>*</text>
				</view>

				<view class="box1-right display-flex">
					<u-radio-group v-model="checkedValue" @change="checkboxChange">
						<u-radio activeColor="#fff" inactiveColor="#999999" iconColor="#45C4B0" labelColor="#3D3D3D"
							shape="circle" v-for="(item, index) in radiolist" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>

			<view class="box1-item display-flex just-between">
				<view class="box1-left display-flex">
					<view class="tit">
						抬头类型
					</view>
					<text>*</text>
				</view>

				<view class="box1-right display-flex">
					<u-radio-group v-model="checkedValue2" @change="checkboxChange2">
						<u-radio activeColor="#fff" inactiveColor="#999999" iconColor="#45C4B0" labelColor="#3D3D3D"
							shape="circle" v-for="(item, index) in typelist" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>

		<view class="info-tit display-flex just-between">
			<view>填写信息</view>
			<text @tap="$go('/showcase/showcase/fastFill')">快速填写</text>
		</view>

		<!-- 个人 增值税普通发票 -->
		<block v-if="checkedValue == '个人'">
			<view class="box-input">
				<view class="box1-item display-flex just-between">
					<view class="box1-left display-flex">
						<view class="tit">
							发票抬头
						</view>
						<text>*</text>
					</view>

					<input type="text" placeholder="填写发票抬头" v-model="top_title">
				</view>
			</view>
		</block>
		<!-- 企业 增值税普通发票 -->
		<block v-if="checkedValue == '企业'">
			<view class="box-input">
				<view class="box1-item display-flex just-between">
					<view class="box1-left display-flex">
						<view class="tit">
							发票抬头
						</view>
						<text>*</text>
					</view>

					<input type="text" placeholder="填写发票抬头" v-model="top_title">
				</view>
				<view class="box1-item display-flex just-between">
					<view class="box1-left display-flex">
						<view class="tit">
							纳税人识别号
						</view>
						<text>*</text>
					</view>

					<input type="text" placeholder="填写纳税人识别号" v-model="qy_taxpayer">
				</view>
				<view class="box1-item display-flex just-between">
					<view class="box1-left display-flex">
						<view class="tit">
							开户银行
						</view>
						<text v-if="checkedValue2 == '增值税专用发票'">*</text>
					</view>

					<input type="text" placeholder="请填写开户许可证上的开户银行" v-model="qy_khh">
				</view>
				<view class="box1-item display-flex just-between">
					<view class="box1-left display-flex">
						<view class="tit">
							开户账号
						</view>
						<text v-if="checkedValue2 == '增值税专用发票'">*</text>
					</view>

					<input type="text" placeholder="请填写开户许可证上的银行账号" v-model="qy_account">
				</view>
				<view class="box1-item display-flex just-between">
					<view class="box1-left display-flex">
						<view class="tit">
							企业注册地址
						</view>
						<text v-if="checkedValue2 == '增值税专用发票'">*</text>
					</view>

					<input type="text" placeholder="请填写营业执照上的注册地址" v-model="qy_address">
				</view>
				<view class="box1-item display-flex just-between">
					<view class="box1-left display-flex">
						<view class="tit">
							企业注册电话
						</view>
						<text v-if="checkedValue2 == '增值税专用发票'">*</text>
					</view>

					<input type="text" placeholder="请填写企业有效的联系电话" v-model="qy_phone">
				</view>
			</view>
		</block>
		<block v-if="checkedValue == '组织'">
			<view class="box-input">
				<view class="box1-item display-flex just-between">
					<view class="box1-left display-flex">
						<view class="tit">
							发票抬头
						</view>
						<text>*</text>
					</view>

					<input type="text" placeholder="填写发票抬头" v-model="top_title">
				</view>
			</view>
			<view class="box-input">
				<view class="box1-item display-flex just-between">
					<view class="box1-left display-flex">
						<view class="tit">
							纳税人识别号
						</view>
					</view>

					<input type="text" placeholder="请输入纳税人识别号" v-model="zz_taxpayer">
				</view>
			</view>
		</block>

		<view class="info-tit">
			类型选择
		</view>
		<view class="box-input">
			<view class="box1-item display-flex just-between">
				<view class="box1-left display-flex">
					<view class="tit">
						发票类型
					</view>
					<text>*</text>
				</view>

				<view class="box1-right display-flex">
					<u-radio-group v-model="checkedValue3" @change="checkboxChange3">
						<u-radio activeColor="#fff" inactiveColor="#999999" iconColor="#45C4B0" labelColor="#3D3D3D"
							shape="circle" v-for="(item, index) in titlist" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>

		<view class="info-tit">
			类型选择
		</view>
		<view class="box-input">
			<view class="box1-item display-flex just-between">
				<view class="box1-left display-flex">
					<view class="tit">
						<block v-if="checkedValue3 == '电子发票'">电子邮箱</block>
						<block v-if="checkedValue3 == '纸质发票'">邮寄地址</block>
					</view>
					<text>*</text>
				</view>

				<input type="text" placeholder="请输入邮箱地址" v-if="checkedValue3 == '电子发票'" v-model="ems">
				<input type="text" placeholder="请输入邮寄地址" v-if="checkedValue3 == '纸质发票'" v-model="address">
			</view>
		</view>
		<view class="result_btn" @tap="onSubmit()">
			提交
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				radiolist: [{
					name: '个人',
					disabled: false
				}, {
					name: '企业',
					disabled: false
				}, {
					name: '组织',
					disabled: false
				}],
				checked: [],
				checkedValue: '个人',
				typelist: [{
					name: '增值税普通发票',
					disabled: false
				}, {
					name: '增值税专用发票',
					disabled: false
				}],
				checkedValue2: '增值税普通发票',
				titlist: [{
					name: '电子发票',
					disabled: false
				}, {
					name: '纸质发票',
					disabled: false
				}],
				checkedValue3: '电子发票',
				top_title: '',
				qy_taxpayer: '',
				qy_khh: '',
				qy_account: '',
				qy_address: '',
				qy_phone: '',
				ems: '',
				address: '',
				zz_taxpayer: '',
				id: '',
				his_id: ''
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
			} else {
				this.$common.errorToShow('参数异常')
			}


		},
		onShow() {

			this.his_id = uni.getStorageSync("inv_id");
			console.log(this.his_id, 777);
			if (this.his_id) {
				this.sethomedata();
			}

		},
		methods: {
			// 提交申请
			onSubmit() {
				if (!this.top_title) {
					this.$common.errorToShow('请填写发票抬头')
					return
				}

				if (this.checkedValue == '企业') {
					if (!this.qy_taxpayer) {
						this.$common.errorToShow('请填写纳税人识别号')
						return
					}
					if (!this.qy_khh) {
						this.$common.errorToShow('请填写开户许可证上的开户银行')
						return
					}

					if (this.checkedValue2 == '增值税专用发票' && !this.qy_account) {
						this.$common.errorToShow('请填写开户许可证上的银行账号')
						return
					}
					if (this.checkedValue2 == '增值税专用发票' && !this.qy_address) {
						this.$common.errorToShow('请填写营业执照上的注册地址')
						return
					}
					if (this.checkedValue2 == '增值税专用发票' && !this.qy_phone) {
						this.$common.errorToShow('请填写企业有效的联系电话')
						return
					}
				}

				if (this.checkedValue == '组织') {
					if (!this.zz_taxpayer) {
						this.$common.errorToShow('请填写纳税人识别号')
						return
					}
				}

				if (this.checkedValue3 == '电子发票') {
					if(!this.ems){
						this.$common.errorToShow('请输入邮箱地址')
						return
					}
					
					var reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
					if (this.ems.match(reg) == null) {
						this.$common.errorToShow('请输入正确的邮箱地址')
						return
					}
				}

				
				if (this.checkedValue3 == '纸质发票' && !this.address) {
					this.$common.errorToShow('请输入邮寄地址')
					return
				}

				this.$api.default.request('invoice/applyInvoice', {
					id: this.id,
					top_title: this.top_title,
					qy_taxpayer: this.qy_taxpayer,
					qy_khh: this.qy_khh,
					qy_account: this.qy_account,
					qy_address: this.qy_address,
					qy_phone: this.qy_phone,
					ems: this.ems,
					address: this.address,
					zz_taxpayer: this.zz_taxpayer,
					type: this.checkedValue == '个人' ? 0 : (this.checkedValue == '企业' ? 1 : 2),
					top_type: this.checkedValue2 == '增值税普通发票' ? 0 : 1,
					ic_type: this.checkedValue3 == '电子发票' ? 0 : 1
				}).then((res) => {
					if (res.code) {
						this.$common.successToShow(res.msg, () => {
							this.$go('/showcase/showcase/invoice_result')
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})

			},
			sethomedata() {
				let that = this;
				this.$api.default.request('invoice/applyInvoiceHisDea', {
					id: this.his_id
				}).then((res) => {
					console.log(res, 7777);
					that.top_title = res.data.top_title
					that.ic_type = res.data.ic_type
					that.top_type = res.data.top_type
					that.checkedValue = res.data.type == 0 ? '个人' : (res.data.type == 1 ? '企业' : '组织')
					that.ems = res.data.ems
					that.address = res.data.address
					that.qy_account = res.data.qy_account
					that.qy_address = res.data.qy_address
					that.qy_khh = res.data.qy_khh
					that.qy_phone = res.data.qy_phone
					that.qy_taxpayer = res.data.qy_taxpayer
					that.zz_taxpayer = res.data.z_taxpayer


				})
			},
			checkboxChange(n) {
				this.top_title = ''
				this.qy_taxpayer = ''
				this.qy_khh = ''
				this.qy_account = ''
				this.qy_address = ''
				this.qy_phone = ''
				this.zz_taxpayer = ''
			},
			checkboxChange2(n) {

				if (this.checkedValue == '个人' && this.checkedValue2 == '增值税专用发票') {
					this.$common.successToShow('不支持选择', () => {
						this.checkedValue2 = '增值税普通发票'
					})

					return
				}

				this.top_title = ''
				this.qy_taxpayer = ''
				this.qy_khh = ''
				this.qy_account = ''
				this.qy_address = ''
				this.qy_phone = ''
				this.zz_taxpayer = ''
			},
			// 类型选择
			checkboxChange3(n) {


			},
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}

	/deep/.u-radio {
		margin-left: 15rpx;
		font-size: 14px;
		color: #3D3D3D;
	}

	.open-box {}

	.open-box1 {
		padding: 20rpx 30rpx;
		padding-bottom: 0;
		background-color: #fff;

		.top-tip {
			padding: 14rpx 18rpx;
			border-radius: 4px;
			background: rgba(69, 196, 176, 0.15);
			font-family: Source Han Sans CN;
			font-size: 12px;
			color: #45C4B0;
			align-items: flex-start;

			image {
				width: 22rpx;
				height: 22rpx;
				margin-right: 8rpx;
				margin-top: 5rpx;
			}

		}
	}

	.box1-item {
		padding: 30rpx 0;
		border-bottom: 1px solid rgba(153, 153, 153, 0.1);

		.box1-left {
			font-family: Source Han Sans CN;
			font-size: 14px;
			color: #3D3D3D;

			text {
				color: #FF0000;
			}
		}
	}

	.info-tit {
		padding: 20rpx 30rpx;
		padding-top: 40rpx;
		font-family: Source Han Sans CN;
		font-size: 12px;
		color: #999999;

		text {
			font-family: '思源黑体';
			font-size: 12px;
			color: #45C4B0;
		}
	}

	.box-input {
		padding: 0 30rpx;
		padding-bottom: 0;
		background-color: #fff;

		input {
			width: 70%;
			text-align: right;
			font-family: Source Han Sans CN;
			font-size: 14px;
			color: #3D3D3D;
		}
	}

	.result_btn {
		margin: 60rpx auto;
		width: 315px;
		height: 43px;
		border-radius: 8px;
		background: #45C4B0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: '思源黑体';
		font-size: 16px;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>